<!--
 *  
 * @Author: QUAN
 *  
-->
<template>
  <div class="badge-list">
    <search-list
      ref="badgeList"
      :api-url="$url.BadgeList"
      :option="searchOpt"
      :itemPerRow="6"
      :beforeQuery="beforeQuery"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="徽章ID"></el-table-column>
      <el-table-column prop="title" label="徽章品类"></el-table-column>
      <el-table-column prop="levelCnt" label="等级个数"></el-table-column>
      <el-table-column prop="online" label="状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['activityOnOffLineSl'](scope.row.online).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="onlineAt" label="首次上线时间"></el-table-column>
      <el-table-column prop="operator" label="最后操作人">
        <template slot-scope="scope">
          <span>{{ scope.row.operator }} ( {{ scope.row.updatedAt }} )</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <!-- <el-button type="text" @click="deleteItem(scope.row)">删除</el-button> -->
          <el-button type="text" v-if="!scope.row.online" @click="onOrOffLine(scope.row)">
            上线
          </el-button>
          <el-button type="text" v-else @click="onOrOffLine(scope.row)">下线</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after">
        <el-button type="success" class="el-icon-plus" @click="add">
          新建徽章
        </el-button>
      </div>
    </search-list>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 多选
        selectedData: [],
        // 筛选
        searchOpt: [
          {
            type: 'activityOnOffLineSl',
            name: 'online',
            label: '全部',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '徽章品类',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'id',
            label: '徽章ID',
          },
        ],
      };
    },
    created() {},
    mounted() {},
    methods: {
      // 上下线
      onOrOffLine(item) {
        this.$confirm('确定对徽章进行状态变更？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let _ = '';
            _ = item.online ? this.$service.BadgeOffline : this.$service.BadgeOnline;
            console.log(_);
            _({
              id: item.id
                ? item.id
                : this.selectedData
                    .map((item) => {
                      return item.id;
                    })
                    .join(','),
            }).then((res) => {
              this.$message.success('操作成功！');
              this.$refs.badgeList.getList();
            });
          })
          .catch(() => {});
      },

      // 详情
      detail(item) {
        const { id } = item;
        this.$tabs.open({ name: 'BadgeDetail', params: { id } });
      },

      // 新增
      add() {
        this.$tabs.open({ name: 'BadgeDetail' });
      },

      // 多选
      selectionChange(val) {
        this.selectedData = [...val];
      },

      // 筛选之前
      beforeQuery({ searchInfo }) {},
    },
  };
</script>
<style lang="less" scoped>
  .badge-list {
  }
</style>
